<template>
  <view class="image-grid">
    <!-- 一张图片占用60%宽度 -->
    <image
      v-if="images.length === 1"
      :src="images[0]"
      class="single-image"
      mode="widthFix"
    />

    <!-- 多张图采用九宫格展示 -->
    <view v-else class="grid-container">
      <view
        v-for="(img, index) in images"
        :key="index"
        class="grid-item"
      >
        <image :src="img" class="grid-image" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  images: {
    type: Array,
    default: () => []
  }
});
</script>

<style scoped>
.image-grid {
  display: flex;
  flex-direction: column;
}

/* 单张图片占60%宽度，高度自适应 */
.single-image {
  width: 60%;
  border-radius: 10rpx;
  display: block;
}

/* 多张图容器 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10rpx;
}

/* 3列布局：每项占 31% 宽度，通过 padding-bottom 保证 1:1 宽高 */
.grid-item {
  width: 31%;
  position: relative;
  background-color: #f2f2f2;
  border-radius: 8rpx;
  overflow: hidden;
}

/* 1:1 高度控制：通过 padding 实现正方形 */
.grid-item::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

/* 图片填充整个容器 */
.grid-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8rpx;
}
</style>
